<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎页面</title>
</head>
<script src="//unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="//unpkg.com/element-ui/lib/index.js" type="text/javascript"></script>
<script src="./resources/js/jquery.min.js" type="text/javascript"></script>
<script src="./resources/js/sweetalert2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="./resources/css/sweetalert2.css" />
<body>
<div id="mainApp">
  <el-container style="padding-top:20px;">
	  <el-header style="heighe:10px;">
		  <el-row :gutter="24">
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
				<el-breadcrumb class="breadcrumb-inner">
					<el-breadcrumb-item><h2>欢迎用户{{user.realName}}登录</h2></el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
		  </el-row>
	  </el-header>
	  <el-main>
	  	  <el-card calss="box-card">
	  	  	<el-table :data="socailData" style="width: 100%">
		      <el-table-column prop="typeName" label="社交账号"  >
		      </el-table-column>
		      <el-table-column prop="value" label="状态"  >
	      		<template slot-scope="scope">
	      			<el-tag type="success" v-if="scope.row.value==true">已绑定</el-tag>
		  	  		<el-tag type="danger" v-if="scope.row.value==false">未绑定</el-tag>
		  	  	</template>
		      </el-table-column>
		      <el-table-column label="操作" >
		      	<template slot-scope="scope">
		      		<form id="myform" action="" method="post" v-if="scope.row.value==false" >
						<el-button size="mini"  type="primary" @click="handleBanding(scope.row)" >绑定</el-button>
					</form>
		      		<el-button size="mini" v-if="scope.row.value==true" type="danger" @click="handleUnBanding(scope.row)">解绑</el-button>
		      	</template>
		      </el-table-column>
    		</el-table>
		  </el-card>
	  </el-main>
  </el-container>
</div>
</body>
<script>
new Vue({
		el:"#mainApp",
	    data:{
	    	user:'',
	    	socailData:[],
	    	form:{},
	    	centerDialogVisible:false
	    },
	    mounted: function (){
	    	//页面加载初始化
	    	this.getUserInfo();
	    	this.queryStatu();
	    },
	    methods: {
	      //获取当前登录用户
    	  getUserInfo(){
	    	  var _this = this;
	    	  $.post("/sys/userinfo", function(data) {
	    		 _this.user=data;
	    	  });
		  },
	      //获取用户绑定状态
	      queryStatu(){
	    	  var _this = this;
	    	  $.get("/connect", function(data) {
	    		  var socailData = new Array();
	    		  var _item = {};
	    		  _item['type']="qq";
	    		  _item['typeName'] = "QQ";
	    		  _item['value']=data.qq;
	    		  socailData.push(_item);
	    		  
	    		  var _item1 = {};
	    		  _item1['type']="weixin";
	    		  _item1['typeName'] = "WEIXIN";
	    		  _item1['value']=data.weixin;
	    		  socailData.push(_item1);
	    		  _this.socailData = socailData;
	    	  });
	      },
	      //绑定
	      handleBanding(row){
	    	  var actionUrl = "/connect/"+row.type;
	    	  $("#myform").attr('action',actionUrl); 
	    	  $("#myform").submit();
	      },
	      //解绑
	      handleUnBanding(row){
	    	var _this = this;
	    	this.centerDialogVisible=true;
    	    $.ajax({
	    	  	url:"/connect/"+row.type,
	    	  	type:"POST",
	    	  	data:{_method:"DELETE"},
	    	  	success:function(result){
	    	  		result = JSON.parse(result);
	    	  		if(result.code=='1'){
	    	  			swal("解绑成功!","","success");
	    	  			_this.queryStatu();
	    	  		}else{
	    	  			swal("解绑失败!","","error");
	    	  		}
    	  		}
    	    });
	      },
	    }
	  });
</script>
</html>